<template>
    
    <div class="all">
        <h1>请选择对战模式</h1>
        <div class="choice">
            <div class="rank">
                <button type="button" class="btn btn-success btn-lg" @click="to_rank">天梯排位</button>
            </div>
            <div class="friend">
                <button type="button" class="btn btn-primary btn-lg" @click="to_friendPk">好友对战</button>
            </div>
            <div class="ai">
                <button type="button" class="btn btn-secondary btn-lg" @click="to_aiChoice">人机对战</button>
            </div>
        </div>

    </div>

</template>

<script>
import router from '../../router/index'
export default{
    
    setup(){
        
        const to_rank = ()=>{
            router.push({
                name:"pk_rank_index"
            })
        }
        const to_aiChoice = ()=> {
            router.push({
                name:"ai_choice"
            })
        }
        const to_friendPk = ()=> {
            router.push({
                name:"pk_friend_index"
            })
        }

        return{
            to_rank,
            to_aiChoice,
            to_friendPk
        }
    }
}
</script>

<style>

.all{
    width:60vw;
    height: 70vh;
    margin: 10vh auto;
}
h1{
    text-align: center;
    font-style: italic;
    
}
.all>h1{
    color: brown;
}
.choice div:nth-child(1){
    margin-top: 70px;
}
.choice div{
    text-align: center;
    margin-top: 30px;
}

.choice div>button{
    font-size: 30px;
    padding:10px 70px;
    transition: 100ms;
    border-radius: 10px;
}
.choice div>button:hover{
    font-size: 40px;
}


</style>